<script>
import image from '@/assets/guest/logo.jpg'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { requestGet } from '@/api/system/common'
export default {
  name: 'GuestDefaultHeader',
  data() {
    return {
      image: image,
      dataList: []
    }
  },
  computed: {
    ...mapGetters(
      ['layout', 'menuId', 'user']
    )
  },
  watch: {
    layout(data) {
      this.initMenu(data.id)
    }
  },
  methods: {
    initMenu(data) {
      if (undefined === data || data === null) {
        data = 0
      }
      // 当前激活的菜单
      let activeId = this.$store.getters.menuId
      let url = 'rest/api/guest/layout/v1/menu/pc/query/menus/layout'
      if (getToken()) {
        url = 'rest/api/layout/v1/menu/pc/query/menus/layout'
      }
      // 查询布局下面的菜单信息
      requestGet(url, { lid: data }).then(res => {
        const { data } = res
        // 菜单数据
        this.dataList = data.reverse()
        if (activeId === 0 && this.dataList !== null && this.dataList.length > 0) {
          activeId = this.dataList[0].id
        }
        if (this.dataList === null || this.dataList.length === 0) {
          activeId = 0
        }
        this.$store.commit('SET_LAYOUT_MENU_ID', activeId)
        this.$store.commit('SET_LAYOUT_MENU', this.dataList)
      })
    },
    // 设置当前激活的菜单
    setActiveId(data) {
      this.$store.commit('SET_LAYOUT_MENU_ID', data)
    }
  }
}
</script>

<template>
  <div class="application-content">
    <el-image :src="image" />
    <div class="application-menu">
      <div
        v-for="item in dataList"
        :key="item.id"
        class="menu-li"
        :class="menuId === item.id ? 'active': ''"
        @click="setActiveId(item.id)"
      >{{ item.name }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.application-menu {
  position: absolute;
  height: 40px;
  top: 68px;
  right: 10px;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: right;
  .menu-li {
    height: 100%;
    line-height: 40px;
    color: var(--header-body-color);
    text-align: center;
    padding: 0 6px;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: var(--header-body-font-weight);
    position: relative;
  }
  .menu-li.active {
    color: var(--header-body-active-color);
    background-color: var(--header-body-active-background);
    border-radius: 4px 4px 0 0;
  }
  .active:before {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    height: 3px;
    right: 0;
    background-color: var(--header-menu-active-menu-line);
  }
}
.application-content {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  position: relative;
}
</style>
